<template>
	<z-paging :refresher-enabled="false" :show-loading-more-when-reload="true" loading-more-default-text=""
		loading-more-loading-text="" loading-more-fail-text="" :empty-view-text="t('common.noData')"
		:show-loading-more-no-more-view="false" ref="paging" v-model="dataList" @query="queryList"
		class="max-w-[750px]">
		<h-dark :title="t('article.titleHelp')"></h-dark>
		<view class="mx-[30rpx] mt-[20rpx]">
			<view class="team-item p-[30rpx] mb-[20rpx] bg-[#2C326B] rounded-lg" v-for="(item, index) in dataList"
				:key="index">
				<navigator :url="'/pages/news_detail/news_detail?id='+item.id">
					<view class="news-card flex">
						<view class="news-card-content flex flex-col justify-between flex-1">
							<view class="news-card-content-title text-lg font-medium">{{ item.title }}</view>
						</view>
						<u-icon name="arrow-right" class="text-muted" size="28"></u-icon>
					</view>
				</navigator>
			</view>
		</view>
		
	</z-paging>
</template>

<script lang="ts" setup>
	import { ref, shallowRef } from 'vue'
	import { getArticleList } from '@/api/news'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('article.titleHelp') })
	const paging = shallowRef()
	const dataList = ref<any[]>([])

	const queryList = async (pageNo : number, pageSize : number) => {
		try {
			const data = await getArticleList({
				page_no: pageNo,
				page_size: pageSize,
				cid: 3
			})
			paging.value.complete(data.lists)
		} catch (error) {
			paging.value.complete(false)
		}
	}
</script>

<style lang="scss">
	.news-card {
		&-content {
			&-title {
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>